<!-- 测试页 -->
<template>
  <div id="testpage">
    <div class="tag">
      <tag
        v-for="(tag,index) in tags"
        :key="tag+index"
        @handleChange="handleChange(tag)"
        v-model="tag.checked"
        closable="true"
        @close="handleClose(tag)"
        >{{ tag.labelName}}</tag
      >
      <tag @handleChange="addTag" v-if="!addingTag">+</tag>
      <cm-input-mini
        :placeholder="'在此输入'"
        @submit="submit"
        v-if="addingTag"
      ></cm-input-mini>
      <button @click="showModal">?</button>
      <tag @handleChange="showModal">boom</tag>
      <tag @handleChange="Toast()">toast</tag>
      
    </div>
    <confirmwindow
      v-model="visibility"
      @bodyClose="bodyClose()"
      :bodyClosable="true"
      :width="400"
      :height="200"
    ></confirmwindow>

    <!-- 初始化弹窗时需传入长宽以使动画生效，
    bodyClose为点击空白区关闭弹窗的回调函数，
    传入bodyClosable使点击空白区关闭功能生效 -->
  </div>
</template>

<script>
import CmInputMini from "../components/common/input/cm-input-mini.vue";
import Confirmwindow from "../components/common/pop/cmModal.vue";
import Tag from "../components/common/tag/tag.vue";
import {addTagsStatus} from "../utils/utils"

export default {
  data() {
    return {
      tags: [

      ],
      checked: false,
      addingTag: false,
      visibility: false,
    };
  },

  components: { Tag, CmInputMini, Confirmwindow, },

  computed: {},

  methods: {
    handleChange(tag) {
      console.log(tag);
      tag.checked = !tag.checked;
    },
    handleClose(tag) {
      console.log(tag);
      console.log(this.tags);
    },
    submit(value) {
      console.log(value);
      let tag = {
        content: value,
        checked: false,
      };
      this.addTag();
      this.tags = [...this.tags, tag];
      this.$getApi.addTag(value)
    },
    addTag() {
      this.addingTag = !this.addingTag;
      console.log(this.addingTag);
    },
    showModal() {
      this.visibility = true;
    },
    bodyClose() {
      this.visibility = false;
    },
    toast(){
      this.$toast('提示')
    },
    getTags(){
      this.$getApi.getTags().then(res=>{
        this.tags = addTagsStatus(res.data.labels,false)
      })
    }
  },
  created(){
    this.getTags()
    

  }
};
</script>
<style>
#testpage {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
#testpage > .tag {
  width: 200px;
  transition: all 0.3s;
}
</style>
